<template>
  <div class="zbox">
    <div class="z1">
      <div class="z1-1">
        <div class="z1-1-1">{{ detail.groupName }}</div>
        <div class="z1-1-2">
          <img :src="detail.image" alt="" />
          <div class="z1-1-2-f1">{{ detail.symbolName }}</div>
          <div class="z1-1-2-f2">{{ detail.multiple }}X {{ detail.side }}</div>
        </div>
      </div>
      <div class="z1-2">{{ detail.switchStatus }}</div>
    </div>
    <div class="z2">
      <div class="z2-item">
        <div class="z2-item-1">平台</div>
        <div class="z2-item-2">{{ detail.platformId === OKX_ID ? 'OKX' : "other" }}</div>
      </div>
      <div class="z2-item">
        <div class="z2-item-1">开启时间</div>
        <div class="z2-item-2">{{ detail.switchCreateTime }}</div>
      </div>
      <div class="z2-item">
        <div class="z2-item-1">当前价格</div>
        <div class="z2-item-2">{{ detail.price }}</div>
      </div>
      <div class="z2-item">
        <div class="z2-item-1">收益率</div>
        <div
          :class="
            +detail.profitRate >= 0 ? 'z2-item-2 active' : 'z2-item-2 ared'
          "
        >
          {{
            +detail.profitRate > 0
              ? "+" + detail.profitRate
              : detail.profitRate
          }}%
        </div>
      </div>
      <div class="z2-item">
        <div class="z2-item-1">总盈利(USDT)</div>
        <div
          :class="
            +detail.profitTotal >= 0 ? 'z2-item-2 active' : 'z2-item-2 ared'
          "
        >
          {{
            +detail.profitTotal > 0
              ? "+" + detail.profitTotal
              : detail.profitTotal
          }}
        </div>
      </div>
      <div class="z2-item">
        <div class="z2-item-1">保证金</div>
        <div class="z2-item-2">{{ detail.margin }}</div>
      </div>
      <div class="z2-item">
        <div class="z2-item-1">预扣燃油费</div>
        <div class="z2-item-2">{{ detail.fuelFrozen }}</div>
      </div>
    </div>
    <div class="z3">
      <!-- <div class="z3-btn">一键锁仓</div> -->
      <div class="z3-btn" @click="handleClose">关闭策略</div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { defineProps, defineEmits } from "vue";
import { Dialog, Toast } from "vant";
import { OKX_ID } from "@/utils/common";

import http from "@/utils/http";
interface IProps {
  detail: any;
}
const { detail } = defineProps<IProps>();
const emit = defineEmits(["handleClose"]);
const handleClose = () => {
  Dialog({
    title: "提示",
    showCancelButton: true,
    message: "确定关闭策略?",
  })
    .then(() => {
      http.post("strategy/app/contract/close/" + detail.id).then((res: any) => {
        if (res.code === 0) {
          Toast("策略已关闭");
          emit("handleClose");
        }
      });
    })
    .catch(() => {
      // on cancel
    });
};
</script>

<style lang="scss" scoped>
.zbox {
  padding: 20px;
  .z1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .z1-1 {
      display: flex;
      flex-direction: column;
      .z1-1-1 {
        font-size: 14px;
        color: #000;
        margin-bottom: 16px;
      }
      .z1-1-2 {
        display: flex;
        align-items: center;
        img {
          width: 16px;
          margin-right: 6px;
          border-radius: 50%;
        }
        .z1-1-2-f1 {
          font-size: 14px;
          font-weight: 600;
          color: #000;
          margin-right: 8px;
        }
        .z1-1-2-f2 {
          font-size: 12px;
          color: #36b4ea;
        }
      }
    }
    .z1-2 {
      width: 70px;
      height: 24px;
      line-height: 24px;
      border-radius: 4px 0px 4px 0px;
      background-color: #36b4ea;
      color: rgba(245, 245, 245, 1);
      font-size: 12px;
      text-align: center;
    }
  }
  .z2 {
    margin: 20px 0;
    .z2-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 34px;
      .z2-item-1 {
        font-size: 13px;
        color: #878b97;
      }
      .z2-item-2 {
        font-size: 13px;
        color: #000;
      }
    }
  }
  .z3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .z3-btn {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
      font-size: 14px;
      background: #0a7aff;
      border-radius: 4px;
      margin: 10px 0;
      &:last-child {
        background-color: #e45360;
      }
    }
  }
}
.active {
  color: #36b4ea !important;
}
.ared {
  color: #d75656 !important;
}
</style>
